window.onload = function () {
    headSearch();
    timeBack();
    lunbotuShow();
}

function headSearch() {
    //  搜索栏js效果
    // 1.获取高度lunbotu高度
    var lun = document.querySelector(".lunbotu");
    var lunHeight = lun.offsetHeight;
    // 4.1 获取header搜索块
    var find = document.querySelector(".search");
    // console.log(lunbotuHeight);
    // 2.获取当前屏幕滚动时 lun滚出屏幕距离
    window.onscroll = function () {
        //   var offsetTop = document.body.scrollTop;
        var offsetTop = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset;
        // console.log(offsetTop);
        // 3.计算比例值  获取透明度 设置背景颜色
        var opacity = 0;
        //当lunbotu还没有完全滚出屏幕 才有必要计算透明度和设置透明度
        if (offsetTop < lunHeight) {
            opacity = offsetTop / lunHeight;
            // 4.设置样式
            find.style.backgroundColor = "rgba(233,35,34," + opacity + ")";

        }
        // opacity=offsetTop/lunHeight;
        // // 4.设置样式
        // find.style.backgroundColor="rgba(233,35,34,"+opacity+")";
    }
}
/* 倒计时效果*/
function timeBack() {
    // 1.获取展示时间的span
    var spans = document.querySelector(".time").querySelectorAll("span");
    // 2.设置初始倒计时时间 以秒作为单位
    var startTime = 300;
    // 3.开启定时器
    var timeId=setInterval(function () {
        startTime--;
        // 判断倒计时是否已经完成
        if(startTime<0){
            // 清除时钟
            clearInterval(timeId);
            return;
        }
        // 得到剩余时间中的时 分 秒
        var hour = Math.floor(startTime / 3600);
        // console.log(hour);
        var minute = Math.floor(startTime % 3600 / 60);
        // console.log(hour +  "  " +  minute);
        var second = Math.floor(startTime % 60);
        // console.log(hour +  "  " +  minute + " " + second);
        // 赋值 将时间填充到span中
        spans[0].innerHTML = Math.floor(hour/10);
        spans[1].innerHTML = Math.floor(hour%10);

        spans[3].innerHTML = Math.floor(minute/10);
        spans[4].innerHTML = Math.floor(minute%10);

        spans[6].innerHTML = Math.floor(second/10);
        spans[7].innerHTML = Math.floor(second%10);

    }, 1000)
}

// 轮播图效果
 function lunbotuShow(){
    //  1.设置修改轮播图页面结构
    // a.在开始位置添加原始的最后一张图
    // b.在结束位置添加原始第一张图
    // 1.1. 获取轮播图结构
    var lun = document.querySelector(".lunbotu");
    // 1.2. 获取图片容器
    var imgBox = lun.querySelector("ul:first-of-type");
    // console.log(imgBox);
    // 1.3. 获取原始第一张图片
    var first=imgBox.querySelector("li:first-of-type");
    // 1.4. 获取原始最后一张图片
    var last=imgBox.querySelector("li:last-of-type");
    // 1.5. 前后插入图片  cloneNode 复制一个DOM元素
    imgBox.appendChild(first.cloneNode(true));
    // insertBefore(需要插入的dom元素,位置)
    imgBox.insertBefore(last.cloneNode(true),imgBox.firstChild);
    // 2.设置对应样式
    // 2.1. 获取所有li元素
    var lis=imgBox.querySelectorAll("li");
    // 2.2. 获取li  数量
    var count =  lis.length;
    // 2.3. 获取lun 宽度
    var lunWidth= lun.offsetWidth;
    // 2.4. 设置图片盒子宽度
    imgBox.style.width=count*lunWidth + "px";
    // 2.5. 设置每一个li元素的宽度
    for( var i=0;i<lis.lenght;i++){
        lis[i].style.width=lunWidth + "px"; 
    }
    // 5.1定义图片索引:图片已经有了一个默认偏移
    var index=1;
    // 3.设置默认偏移
    imgBox.style.left=-lunWidth + "px";
    // 4. 当屏幕变化时候 重新计算宽度
    window.onresize=function(){
          // 4.1. 获取lunbotu 宽度  覆盖全局宽度
     lunWidth= lunBoTu.offsetWidth;
    //4.2. 设置图片盒子宽度
    imgBox.style.width=count*lunWidth + "px";
    // 4.3. 设置每一个li元素的宽度
    for( var i=0;i<lis.lenght;i++){
        lis[i].style.width=lunWidth + "px"; 
    }
    // 4.4设置默认偏移
    imgBox.style.left=-index * lunWidth + "px";
    }
    //  6.点标记
 var setMark=function(index){
    var marks=lun.querySelector("ul:last-of-type").querySelectorAll("li");
    //先清除其他li元素active样式
    for( var i=0;i<marks.length;i++){
        marks[i].classList.remove("active");
    }
    //为当前li元素添加active样式
    marks[index-1].classList.add("active");
 }
    // 5.实现自动轮播  
    setInterval(function(){
        //5.2 变化索引
        index++;
        // 5.3 添加过渡效果
        imgBox.style.transition="left 2s ease-in-out";
        // 5.4 设置偏移
        imgBox.style.left=(-index * lunWidth)+"px";
        // 5.5判断是否是最后一张 
        // console.log(index)
      setTimeout(function(){
        if(index==count-1){
            // console.log(index); 
            index=1;
            imgBox.style.transition="none";
            // 偏移到指定位置
            imgBox.style.left=(-index * lunWidth)+"px";
        }
        // 设置标记
        setMark(index);
      },100)
    },2000)
 }
